import React from 'react';
import {Breadcrumb, Icon, Popover} from 'antd';
import {WeaTools} from 'ecCom';

import './style/';
import SearchRcmd from './SearchRcmd';

class WeaEMPortalMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [{module: '', name: props.type === 'left' ? '前端菜单' : '后端菜单', data: []}],
            index: 0,
            rcmdVisible: false,
            rcmdData: []
        };
        this.setShowData = this.setShowData.bind(this);
        this.getShowData = this.getShowData.bind(this);
        this.onOpenMenu = this.onOpenMenu.bind(this);
        this.onRcmdSearch = this.onRcmdSearch.bind(this);
        this.onRcmdVisibleChange = this.onRcmdVisibleChange.bind(this);
    }

    componentWillMount() {
        const {type} = this.props;

        let api = '';
        if (type === 'left') {
            api = '/api/portal/menu/getFrontEndMenu?withPortal=0&isLoadAll=1';
        } else if (type === 'top') {
            api = '/api/portal/menu/getBackEndMenu';
        }

        api && WeaTools.callApi(api, 'GET', {}).then(result => {
            const {data = []} = result;
            this.setState({data: [{module: '', name: type === 'left' ? '前端菜单' : '后端菜单', data}], index: 0});
        });
    }

    render() {
        const {data, index, rcmdVisible, rcmdData} = this.state;

        return (
            <div className="wea-em-portal-menu">
                <div className="wea-em-portal-menu-toolbar">
                    <div className="wea-em-portal-menu-back" title="上一级" onClick={() => this.getShowData(index - 1)}>
                        <img src="/spa/portal/images/em/back.png" alt=""/>
                    </div>
                    <div className="wea-em-portal-menu-nav">
                        <Breadcrumb separator={<i className="icon-coms-organization-right"/>}>
                            {
                                data.map((item, index) => {
                                    return (
                                        <Breadcrumb.Item key={item.id} onClick={() => this.getShowData(index)}>
                                            {index === 0 && <Icon type="home"/>}
                                            <span>{item.name}</span>
                                        </Breadcrumb.Item>
                                    );
                                })
                            }
                        </Breadcrumb>
                    </div>
                    <div className="wea-em-portal-menu-search">
                        <Popover
                            trigger="click"
                            placement="bottomLeft"
                            content={<SearchRcmd data={rcmdData} onOpenMenu={this.onOpenMenu}/>}
                            overlayClassName="wea-em-portal-menu-search-rcmd"
                            visible={rcmdVisible}
                            onVisibleChange={this.onRcmdVisibleChange}
                        >
                            <div></div>
                        </Popover>
                        <input placeholder="请输入菜单名称/首字母" onClick={this.onRcmdSearch} onChange={this.onRcmdSearch}/>
                        <i className="icon-coms-search"/>
                    </div>
                </div>
                <ul>
                    {
                        data[index]['data'].map((item) => {
                            const module = data[index]['module'] || item.id;
                            return (
                                <li key={item.id} onClick={() => this.setShowData(data[index]['module'], item, index + 1)}>
                                    <div className={`wea-em-portal-menu-item wevicon-module wevicon-module-${module}`}><i/></div>
                                    <span>{item.name}</span>
                                </li>
                            );
                        })
                    }
                </ul>
            </div>
        );
    }

    setShowData(module, item, index) {
        if (item.child) {
            const {data} = this.state;
            data.push({module: module || item.id, name: item.name, data: item.child});
            this.setState({data, index});
        } else if (item.url) {
            this.onOpenMenu(item.url);
        }
    }

    getShowData(index) {
        if (index >= 0) {
            const {data} = this.state;
            this.setState({data: data.slice(0, index + 1), index});
        }
    }

    onOpenMenu(url) {
        this.onRcmdVisibleChange(false);

        let szFeatures = "top=0,";
        szFeatures += "left=0,";
        szFeatures += "width=" + (screen.availWidth - 10) + ",";
        szFeatures += "height=" + (screen.availHeight - 60) + ",";
        szFeatures += "directories=no,";
        szFeatures += "status=yes,";
        szFeatures += "menubar=no,";
        szFeatures += "scrollbars=yes,";
        szFeatures += "resizable=yes";
        window.open(url, "", szFeatures);
    }

    onRcmdSearch(e) {
        const value = e.target.value;
        this.onRcmdVisibleChange(!!value);

        const {data} = this.state;
        const rcmdData = [];

        const loop = (moduleId, moduleName, item) => {
            const child = item.child;
            if (child && child.length) {
                for (let i = 0, len = child.length; i < len; i++) {
                    const {name = '', pinyin = ''} = child[i];
                    if (name.indexOf(value) != -1 || pinyin.indexOf(value.toLowerCase()) != -1) {
                        child[i].moduleId = moduleId;
                        child[i].moduleName = moduleName;
                        rcmdData.push(child[i]);
                    }
                    loop(moduleId, moduleName, child[i]);
                }
            }
        };

        data[0]['data'].forEach((item) => {
            const moduleId = item.infoId || '';
            const moduleName = item.name || '';

            const {name = '', pinyin = ''} = item;
            if (name.indexOf(value) != -1 || pinyin.indexOf(value.toLowerCase()) != -1) {
                item.moduleId = moduleId;
                item.moduleName = moduleId;
            }
            loop(moduleId, moduleName, item);
        });

        this.setState({rcmdData});
    }

    onRcmdVisibleChange(visible) {
        this.setState({rcmdVisible: visible});
    }
}

export default WeaEMPortalMenu;